import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Platform
} from 'react-native';
import PropTypes from "prop-types";

import Label from '../label';
import Color from '../../config/theme/standard/color';
import FontSize from '../../config/theme/standard/fonts';

const grid = 4;
//模块声名并导出
export default class Badge extends Component {
    //构造函数
    constructor(props) {
        super(props);
        
    }
    
    isRealNum(val){
        // isNaN()函数 把空串 空格 以及NUll 按照0来处理 所以先去除
        if(val === "" || val ==null){
            return false;
        }
        if(!isNaN(val)){
            return true;
        }else{
            return false;
        }
    }      
    
    //渲染
    render() {
        let dotContainer = [styles.contentStyle];
        const { children, type, text, badgePosition, cornerStyle,cornerColor, normalStyle, outLineFlag, normalColor,fontStyle } = this.props;
        let marginHorizontal=0;
        if (type == 'dot') {
            let textStr = text;
            if(this.isRealNum(textStr)){
                if(parseInt(textStr)>99){
                    textStr = '99+'
                    marginHorizontal=4;
                }
                dotContainer.push({height: 13, minWidth: 13})
            }else{
                if(!textStr){
                    dotContainer.push({height: 8,width: 8,borderRadius:11})
                }else{
                    marginHorizontal=4;
                }
            }
            return (
                <View style={[dotContainer, this.props.dotStyle, { backgroundColor: this.props.backgroundColor, borderColor: this.props.backgroundColor },
                    badgePosition ? badgePosition == 'rightTop' ? styles.rightTop : styles.leftTop : null, Platform.OS == 'harmony' &&{ zIndex:1 }]}>
                    <Label text={textStr} labelStyle={[{marginHorizontal,fontSize:FontSize.badge.dotTextFontSize, color:Color.badge.text,backgroundColor: 'transparent'},fontStyle]}/>
                </View>
            );
        } else if (type == 'normal') {
                return (
                    <View style={[styles.normal, normalStyle, outLineFlag ? { borderColor: normalColor } : { borderColor: normalColor, backgroundColor: normalColor }]}>
                        <Label text={text} textAlign={'center'} labelStyle={[ {color: outLineFlag ? normalColor : 'white',fontSize:FontSize.badge.textFontSize},fontStyle]}/>
                    </View>
                );
        }else if(type == 'popverRight'){
            let textStr = text;
            if(this.isRealNum(textStr)){
                if(parseInt(textStr)>99){
                    textStr = '99+'
                }
            }
            return (
                <View style={[styles.popver,styles.popverRight,this.props.dotStyle, { backgroundColor: Color.badge.popverBackground, borderColor: Color.badge.popverBackground },
                    badgePosition ? badgePosition == 'rightTop' ? styles.rightTop : styles.leftTop : null, Platform.OS == 'harmony' &&{ zIndex:1 }]}>
                    <Label text={textStr} labelStyle={[{marginHorizontal,fontSize:FontSize.badge.popverTextFontSize, color:Color.badge.text,backgroundColor: 'transparent'},fontStyle]}/>
                </View>
            );
        }
        else if(type == 'popverLeft'){
            let textStr = text;
            if(this.isRealNum(textStr)){
                if(parseInt(textStr)>99){
                    textStr = '99+'
                }
            }
            return (
                <View style={[styles.popver,styles.popverLeft,this.props.dotStyle, { backgroundColor: Color.badge.popverBackground, borderColor: Color.badge.popverBackground },
                    badgePosition ? badgePosition == 'rightTop' ? styles.rightTop : styles.leftTop : null, Platform.OS == 'harmony' &&{ zIndex:1 }]}>
                    <Label text={textStr} labelStyle={[{marginHorizontal,fontSize:FontSize.badge.popverTextFontSize, color:Color.badge.text,backgroundColor: 'transparent'},fontStyle]}/>
                </View>
            );
        } else {
            return (
                <View style={[styles.wrap, cornerStyle]}>
                    {children}
                    <View style={[styles.textCorner,{backgroundColor:cornerColor}, badgePosition == 'rightTop' ? styles.cornerRightTop : styles.cornerLeftTop, Platform.OS == 'harmony' &&{ zIndex:1 }]}>
                        <Label text={text} textAlign={'center'}  color={'white'} labelStyle={[{fontSize:FontSize.badge.textFontSize},fontStyle]}/>
                    </View>
                </View>
            );

            }
        }
};
Badge.propTypes={
    type: PropTypes.string,
    text: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number
    ]),
    fontSize: PropTypes.number,
    outLineFlag: PropTypes.bool,
    normalColor: PropTypes.string,
    badgePosition: PropTypes.string,
    cornerStyle: PropTypes.any,
    normalStyle: PropTypes.any,
    cornerColor: PropTypes.any,
    fontStyle: PropTypes.object,
    dotStyle: PropTypes.any,
    backgroundColor:PropTypes.string,
};

//默认属性
Badge.defaultProps = {
    type: 'dot',
    fontSize: FontSize.btnFontSize,
    backgroundColor: Color.badge.background,
    color: Color.white,
    badgePosition: '',
    text: '',
    outLineFlag: false,
    normalColor: Color.badge.background,
    cornerColor:Color.badge.background,
    dotStyle:{
        position:'absolute'
    }
};

const styles = StyleSheet.create({
    contentStyle: {
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        position:'absolute',
        borderRadius: 13
    },
    leftTop:{
        position: 'absolute',
        left:  -3,
        top: -3
    },
    rightTop:{
        position: 'absolute',
        right: -3,
        top: -3
    },
    //normal style 开始
    normal: {
        height: 20,
        borderRadius: 2,
        alignItems: 'center',
        justifyContent: 'center',
        borderWidth: 1,
        paddingHorizontal: 4,
    },
    //normal style 结束
    //corner styles 开始
    //popver styles 
    popver :{
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        height: 14,
        paddingHorizontal: 4,
       
    },
    popverRight : {
        borderTopRightRadius:7,
        borderTopLeftRadius:7,
        borderBottomRightRadius:7,
    },
    popverLeft:{
        borderTopRightRadius:7,
        borderTopLeftRadius:7,
        borderBottomLeftRadius:7,
    },
    wrap: {
        flexDirection: 'row',
        overflow:'hidden',        
    },
    textCorner: {
        width: 18 * grid,
        backgroundColor: Color.main,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    cornerLeftTop:{
        transform: [{
          rotate: '-45deg',
        }],
        position: 'absolute',
        top: 2 * grid,
        left: -5 * grid
    },
    cornerRightTop:{
        transform: [{
          rotate: '45deg',
        }],
        position: 'absolute',
        top: 2 * grid,
        right: -5 * grid
     }
});